<!--
 * @Descripttion: 库存查询列表
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-07-18 16:25:10
 -->
<template>
  <div class="tab">
    <ul class="clearfix">
      <li
        v-for="(item,index) in texts"
        :key="index"
        :class="{current:(currentIndex === index)}"
        @click="btnClick(index)"
      >
        <a>{{ item }}</a>
      </li>
      <li
        v-show="isShowDate"
        :class="{current:(currentIndex === tabLen)}"
        @click="btnClick(tabLen)"
      >
        <slot name="date">
          <el-popover
            :class="{current:(currentIndex === tabLen)}"
            placement="top-start"
            trigger="hover"
          >
            <el-date-picker
              v-model="rangeDate"
              type="daterange"
              :unlink-panels="true"
              v-bind="$attrs"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="onDateChange"
            />
            <a slot="reference">
              <slot name="reference">其他时间</slot>
            </a>
          </el-popover>
        </slot>
      </li>
      <slot />
    </ul>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { getYesterday, getToday, getLastMonth, getThisMonth } from '@/libs/util.js'

export default {
  name: 'StockList',
  mixins: [oftenuse],
  props: {
    texts: {
      type: Array,
      default: () => { return ['全部', '今天', '昨天', '本月', '上个月'] }
    },
    isShowDate: {
      type: Boolean,
      default: true
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0,
      rangeDate: null
    }
  },
  computed: {
    tabLen: function(params) {
      const textArr = this.texts || []
      return textArr.length
    }
  },
  watch: {
    currentIndex: {
      handler(val) {
        this.emitDateChange(val)
      },
      immediate: true
    },
    value: {
      handler(val) {
        this.currentIndex = val
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    btnClick(index) {
      this.$emit('on-click', index)
      if (index !== this.tabLen) {
        this.$emit('input', index)
        this.currentIndex = index
      }
    },
    emitDateChange(currentIndex) {
      const timeRange = {
        0: {},
        1: getToday(),
        2: getYesterday(),
        3: getThisMonth(),
        4: getLastMonth()
      }
      if (currentIndex < this.tabLen) {
        this.$emit('input', currentIndex)
        this.$emit('on-date-change', timeRange[currentIndex])
      }
    },
    onDateChange(data) {
      const index = this.tabLen
      const dateObj = { beginTime: data[0], endTime: data[1] }
      this.$emit('on-date-change', dateObj)
      this.$emit('input', index)
    }
  }
}
</script>
<style scoped>

</style>
